<template>
    <div>
        <!-- 面包屑导航区域 -->
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图区域 -->
       <el-card>
           <!-- 搜索与添加区域  搜索功能 1.为input绑定数据queryInfo.query 2.为搜索按钮绑定点击事件渲染页面-->
            <el-row :gutter='20'>
                <el-col :span='8'>
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearble @clear='getUserList'>
                    <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                 <el-col :span='4'>
                     <el-button type='primary' @click="addDialogVisible = true">添加用户</el-button>
                 </el-col>
            </el-row>

            <!-- 用户列表区域 1.通过:data绑定数据源 2.label表示标题 prop表示哪个数据-->
            <el-table :data="userlist" border stripe>
                 <el-table-column type='index'> </el-table-column>
                <el-table-column label='姓名' prop='username'> </el-table-column>
                <el-table-column label='邮箱' prop='email'> </el-table-column>
                <el-table-column label='电话' prop='mobile'> </el-table-column>
                <el-table-column label='角色' prop='rote_name'> </el-table-column>
                 <el-table-column label='状态' > 
                     <!-- 1.先定义作用域插槽 2.接收数据 通过scope.row拿到当前行的数据 3.绑定v-model具体的属性值-->
                     <template slot-scope="scope"> 
                        <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
                        </el-switch>
                     </template>
                 </el-table-column>
                  <el-table-column label='操作'>
                       <template slot-scope="scope"> 
                                  <!-- 修改按钮 -->
                         <el-button type="primary" icon="el-icon-edit" size='mini' @click="showEditDialog(scope.row.id)"></el-button>
                                  <!-- 删除按钮 -->
                         <el-button type="danger" icon="el-icon-delete" size='mini' @click="removeUserById(scope.row.id)"></el-button>
                                <!-- 分配角色按钮 -->
                        <el-tooltip effect='dark' content='分配角色' placement='top' :enterble='false'>
                             <el-button type="warning" icon="el-icon-setting" size='mini'></el-button>
                        </el-tooltip>
                        </el-switch>
                     </template>
                  </el-table-column>
            </el-table>

            <!-- 分页区域  1. 定义size-change事件监听最新的pagesize 2.pagesize发生改变发起请求 -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
             </el-pagination>
       </el-card>

       <!--添加用户的对话框  -->
       <el-dialog
            title="添加用户"
            :visible.sync="addDialogVisible"
            width="50%" @close='addDialogClosed'>
            <!-- 内容主体区域 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser" >确 定</el-button>
            </span>
       </el-dialog>
    
    <!-- 修改用户的对话框 -->
    <el-dialog
            title="修改用户"
            :visible.sync="editDialogVisible"
            width="50%" @close='editDialogClosed'>
            <!-- 内容主体区域 -->
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名" >
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                 <el-form-item label="邮箱" prop='email'>
                    <el-input v-model="editForm.email" ></el-input>
                </el-form-item>
                 <el-form-item label="手机"  prop='mobile'>
                    <el-input v-model="editForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserInfo" >确 定</el-button>
            </span>
       </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        // 验证邮箱的规则
        let checkEmail = (rule,value,cb) => {
            const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/
            if(regEmail.test(value)) {
                // 合法的邮箱
                return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }
        // 验证手机号的规则
        let checkMobile = (rule,value,cb) => {
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if(regMobile.test(value)) {
                return cb()
            }
            cb(new Error('请输入合法的手机号'))
        }
        return {
            // 获取用户列表的参数对象
            queryInfo:{
                query:'',
                // 当前的页数
                pagenum:1,
                // 当前每页显示多少条数据
                pagesize:2
            },
            userlist:[],
            total:0,
            // 控制添加用户对话框的显示与隐藏
            addDialogVisible:false,
            // 添加用户的表单数据
            addForm:{ 
                username:'',
                password:'',
                email:'',
                mobile:''
            },
            // 添加表单的验证规则对象
            addFormRules:{
                username:[
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password:[
                     { required: true, message: '请输入登录密码', trigger: 'blur' },
                     {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                ],
                email:[
                     { required: true, message: '请输入邮箱', trigger: 'blur' },
                     {validator:checkEmail,trigger: 'blur'}
                ],
                mobile:[
                     { required: true, message: '请输入手机号', trigger: 'blur' },
                     {validator:checkMobile,trigger: 'blur'}
                ]
            },
            // 控制修改用户对话框的显示与隐藏
            editDialogVisible:false,
            // 查询到的用户信息对象
            editForm:{ },
            // 修改表单的验证规则对象
            editFormRules:{
                email:[
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                     {validator:checkEmail,trigger: 'blur'}
                ],
                mobile:[
                     { required: true, message: '请输入手机号', trigger: 'blur' },
                     {validator:checkMobile,trigger: 'blur'}
                ]
            }
           

        }
    },
    created() {
       this.getUserList() 
    },
    methods: {
       async getUserList() {
        const {data : res} = await this.$http.get('users',{
                params:this.queryInfo
            })    
            // console.log(res);
            if(res.meta.status !== 200) return this.$message.error('获取用户列表失败')
           //对请求回来的数据进行赋值
            this.userlist = res.data.users
            this.total = res.data.total
        },
        // 监听pagesize 发生改变的事件
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getUserList()
        },
        // 监听页码值改变的事件
        handleCurrentChange(newPage) {
              this.queryInfo.pagenum = newPage
               this.getUserList()
        },
        // 监听switch 开关状态的改变 1.监听switch的change事件拿到最新状态 2.发起请求修改状态同步带页面
      async  userStateChanged(userinfo) {
         const {data:res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
         console.log(res);
         if(res.meta.status !== 200) {
               userinfo.mg_state = !userinfo.mg_state 
              return this.$message.error('更新用户状态失败')
            }
        this.$message.success('更新用户状态成功') 
      },
    //   监听用户对话框的关闭事件
      addDialogClosed() {
          this.$refs.addFormRef.reseFields()
      },
    //  点击按钮添加新用户
      addUser() {
          this.$refs.addFormRef.validate(async valid =>{
              if(!valid) return
            const {data:res} = await this.$http.post('users',this.addForm)
            if(res.meta.status !== 201) return this.$message.error('添加用户失败')
            this.$message.success('添加用户成功')
            this.addDialogVisible = false //隐藏添加用户的对话框
            this.getUserList() //重新获取用户列表数据
          })
      },
    //   展示编辑用户的对话框
     async showEditDialog(id) {
         const {data:res} = await this.$http.get('users/' + id)
         if(res.meta.status !== 200) return this.$message.error('查询用户信息失败')
        console.log(res);
        this.editForm = res.data //将查询的数据进行赋值
         this.editDialogVisible = true
      },
    //  监听修改用户对话框的关闭事件
      editDialogClosed() {
          this.$refs.editFormRef.reseFields()
      },
    //   修改用户信息并提交
     editUserInfo() {
          this.$refs.editFormRef.validate(async valid =>{
              if(!valid) return 
              const {data:res} = await this.$http.put('users/' + this.editForm.id,{
                  email:this.editForm.email,
                  mobile:this.editForm.mobile
              })
              if(res.meta.status != 200) return this.$message.error('更新用户信息失败')
            //   关闭对话框
            this.editDialogVisible = false
            // 更新数据
            this.getUserList()
            // 提示修改成功
            this.$message.success('更新用户信息成功')
          })
     },
    //  根据id删除数据
    async removeUserById(id) {
        //  弹出询问用户是否删除数据
    const confirmResult =  await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        // 判断用户点击了删除按钮 则返回confirm
        // 判断用户点击了取消按钮 则返回cancel
        if(confirmResult !=='confirm') {
            return this.$message.info('取消删除')
        }
        // 调接口删除用户
      const {data:res} = await this.$http.delete('users/' + id)
      if(res.meta.status !== 200) return this.$message.error('删除用户失败')
      this.$message.success('删除用户成功')
      this.getUserList()
     }

  }
}
</script>

<style lang="less" scoped>
    
</style>